<template>
  <div class="menu-bar drag">
    <div class="logo">
      <el-icon class="icon"><Notebook /></el-icon>
      <span class="title">批量重命名软件</span>
    </div>
    <!-- 最小化、最大化、关闭 -->
    <div class="oper-section no-drag">
      <el-icon @click="handleMinimize"><Minus /></el-icon>
      <el-icon @click="handleMaximize"><FullScreen /></el-icon>
      <el-icon @click="handleClose"><Close /></el-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Minus, FullScreen, Notebook, Close } from '@element-plus/icons-vue'

// 最小化
function handleMinimize() {
  window.api.minimize()
}

// 最大化
function handleMaximize() {
  window.api.maximize()
}

// 关闭
function handleClose() {
  window.api.close()
}
</script>

<style lang="less" scoped>
.menu-bar {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 36px;
  color: #fff;
  background: #2980b9;
  font-size: 18px;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      width: 42px;
    }

    .title {
      font-size: 16px;
    }
  }

  .oper-section {
    display: flex;
    align-items: center;

    > :nth-child(n) {
      width: 60px;
      cursor: pointer;
      height: 100%;

      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
